var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

// 球运动的速率
var speed = null;
// 球
var ball = null;
// 运行中的轨迹点
var points = null;
// 轨迹点的图像
var pointImage = new Image();
// 运行的方向
var angle = null;


function Point(x, y){
    this.x = x;
    this.y = y;
}

function draw(){
    context.fillStyle = '#ffffff';
    context.fillRect(0, 0, 500, 500);
    context.strokeRect(0, 0, 500, 500);

    var radians = angle * Math.PI / 180;
    xunits = Math.cos(radians) * speed;
    yunits = Math.sin(radians) * speed;
    angle -= 5;
    ball.x += xunits;
    ball.y += yunits;

    points.push({x:ball.x, y:ball.y});

    for (var len = points.length, i = 0; i < len; i++) {
        context.drawImage(pointImage, points[i].x, points[i].y, 3, 3);
    }

    context.beginPath();
    context.fillStyle = '#000000';
    context.arc(ball.x, ball.y, 10, 0, 2 * Math.PI);
    context.closePath();
    context.fill();
}

(function(){
    speed = 5;
    ball = new Point(100, 100);
    angle = 90;
    points = [];

    pointImage.src = "../image/part5/point.png";
    pointImage.onload = function(){
        window.setInterval("draw()", 30);
    }
})();
